<template>
  <div>
    <div class="body-content choose-last-div">
      <div class="pop-title body-heavy">
        <img src="@/static/icon/24px_arrow_left.png" @click="onClickLeft"/>
        <span class="body-heavy">编辑{{ chooseTitle }}</span>
      </div>
      <div class="choose-row">
        <div class="choose-row-left Paragraph-P2-heavy">已选{{ chooseTitle }}：</div>
        <div class="choose-row-right">
          <div v-if="chooseItemList && chooseItemList.length === 0">暂无</div>
          <template v-for="(item, i) in quickChooseItemList">
            <div class="choose-row-item quick-choose-row-item paragraph-p3-light"
                 :key="'chooseItem' + i"
                 v-if="item.isChoose"
                 @click="deleteItem(i, item.title)"
            >
              <span>{{ item.title }}</span>
              <van-icon class="clear-icon" name="clear"/>
            </div>
          </template>
        </div>
      </div>
      <div class="choose-row">
        <div class="choose-row-left paragraph-p3-light">快速选项：</div>
        <div class="choose-row-right">
          <div class="choose-row-item paragraph-p3-light"
               v-for="(item, i) in quickChooseItemList"
               :key="'quickChooseItem' + i"
               :style="item.isChoose? 'color: #737373;': ''"
               @click="!item.isChoose && chooseItem(i)"
          >
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
      <van-field class="choose-input"
                 v-model="inputValue"
                 clearable
                 :placeholder="'在此添加' + chooseTitle"
                 @blur="addItem"
      />
    </div>
    <button-center :disable="chooseItemList.length == 0" :button-name="buttonName"
                   @click.native="sureConfirm"></button-center>
  </div>
</template>
<script>
import {Cell, CellGroup, Field, Tag, Toast} from "vant";
import ButtonCenter from "@/components/Button/Center"

export default {
  name: "ProductSelect",
  props: {
    isSingleChoice: {type: Boolean, default: () => false},
    type: {type: Number, default: () => (1)},
    chooseItems: Array,
    quickChooseItems: Array,
  },
  components: {
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    ButtonCenter,
  },
  data() {
    return {
      disable: true,
      buttonName: '确定',
      inputValue: '',
      chooseTitle: '',
      chooseItemList: this.chooseItems,
      quickChooseItemList: this.quickChooseItems,
    };
  },
  mounted() {
    if (this.type === 1) {
      this.chooseTitle = '尺寸'
    }
    if (this.type === 2) {
      this.chooseTitle = '配件'
    }
  },
  methods: {
    onClickLeft() {
      this.$emit("productSelectBackEvent");
    },
    deleteItem(index, value) {
      for (let i = 0; i < this.chooseItemList.length; i++) {
        if (value === this.chooseItemList[i]) {
          this.chooseItemList.splice(i, 1);
        }
      }
      this.quickChooseItemList[index].isChoose = !this.quickChooseItemList[index].isChoose
    },
    chooseItem(i) {
      if (!this.chooseItemList) {
        this.chooseItemList = [];
      }
      if (!(this.isSingleChoice && this.chooseItemList.length > 0)) {
        this.quickChooseItemList[i].isChoose = !this.quickChooseItemList[i].isChoose
        this.chooseItemList = []
        this.quickChooseItemList.forEach(item => {
          if (item.isChoose) {
            this.chooseItemList.push(item.title)
          }
        })
        this.inputValue = ''
      }
    },
    addItem(event) {
      const title = event.target.value
      if (title && title.trim().length > 0) {
        if (!this.isSingleChoice || (this.isSingleChoice && this.chooseItemList.length === 0)) {
          if (title.length > 10) {
            Toast("输入长度不能超过10个字符")
          } else {
            let obj = {title: title, isChoose: true}
            this.quickChooseItemList.push(obj)
            this.chooseItemList = []
            this.quickChooseItemList.forEach(item => {
              if (item.isChoose) {
                this.chooseItemList.push(item.title)
              }
            })
          }
        }
      }
    },
    sureConfirm() {
      this.$emit("confirmEvent", this.chooseItemList);
    },
  },
};
</script>

<style scoped>
.pop-title {
  height: 44px;
  width: 375px;
  margin-top: 8px;
  border-radius: 0px;
  display: flex;
  justify-items: center;
  align-items: center;
}

.pop-title > img {
  height: 24px;
  width: 24px;
}

.pop-title > span {
  margin-left: 120px;
}

.choose-input {
  height: 46px;
  width: 343px;
  border-radius: 4px;
  padding: 12px;
  background: #F5F5F5;
  margin: 8px 0 80px 0;
}

.clear-icon {
  margin-left: 5px;
  color: #B2B2B2;
}

.choose-row {
  margin: 8px 0;
  display: flex;
}

.choose-row-left {
  width: 20vh;
}

.choose-row-right {
  width: 80vh;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.choose-row-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  margin: 0 4px 4px 0;
  height: 22px;
  background: #F5F5F5;
  border-radius: 4px;
}

.quick-choose-row-item {
  background: #FFF5CC;
}

.choose-last-div {
  padding-bottom: 24px;
}
</style>